<template>
  <div class="full-page" style="background-color:#F2F3F4;">
    <div v-for="(item, index) in orderList" :key="index">
      <!-- 订单简介表盘 -->
      <van-panel
        style="padding:5px;"
        :title="`订单号: ${item.order_id}`"
        :status="getStatusText(item.status)"
        icon="balance-list-o"
      >
        <van-cell slot="default">
          <div>付款: {{ item.payment_amount }}</div>
          <div>创建时间: {{ item.created_time }}</div>
          <div>付款时间: {{ item.payment_time }}</div>
        </van-cell>
        <div slot="footer" style="text-align: right;">
          <van-button
            plain
            size="small"
            type="info"
            @click="onDetailClick(item)"
            >查看详情</van-button
          >
        </div>
      </van-panel>

      <div style="height:10px;background-color:#F2F3F4;" />
    </div>

    <div
      style="padding: 10px 0 20px 0; text-align: center; vertical-align: middle; background-color:#F2F3F4;"
    >
      <!-- 置底提示 -->
      <p v-if="ended" style="color: grey; margin:0;">
        没有更多了~
      </p>
      <van-loading v-else />
    </div>
  </div>
</template>

<script>
import { axios, API_URL, throttle } from "../../api"
import { SwipeCell, Cell, CellGroup, Icon, Button, Panel, Loading } from "vant"
export default {
  components: {
    [Cell.name]: Cell,
    [Icon.name]: Icon,
    [SwipeCell.name]: SwipeCell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Panel.name]: Panel,
    [Loading.name]: Loading
  },
  data() {
    return {
      orderList: [],
      group_index: -1,
      ended: false,
      //下拉阈值
      throttledGetOrders: throttle(this.getNextOrders, 1000)
    }
  },
  methods: {
    onCancelClick(item) {
      this.orderList.splice(this.orderList.indexOf(item), 1)
    },
    onDetailClick(order) {
      this.$router.push({
        name: "detail",
        params: {
          order_id: order.order_id
        }
      })
    },
    getStatusText(status) {
      // 订单状态显示
      switch (status) {
        case 0:
          return "待付款"
        case 1:
          return "已付款"
        case 2:
          return "配送中"
        case 3:
          return "已到达"
        case 4:
          return "已收货"
        case 5:
          return "异常"
      }
    },
    getNextOrders() {
      // 获得订单id
      if (this.ended) return
      this.group_index += 1
      axios
        .get(API_URL + "customer/orders", {
          params: { group_index: this.group_index },
          headers: {
            authorization: this.$store.state.customer_token
          }
        })
        .then(response => {
          let order_ids = response.data.orders
          // 根据订单id获得订单信息
          order_ids.forEach(order_id => {
            axios
              .get(API_URL + "customer/orders/" + order_id, {
                headers: {
                  authorization: this.$store.state.customer_token
                }
              })
              .then(response => {
                let item = {}
                item.status = response.data.status
                item.created_time = response.data.created_time
                item.payment_time = response.data.payment_time
                item.payment_amount = response.data.payment_amount
                item.items = response.data.items
                item.order_id = order_id
                this.orderList.push(item)
              })
              .catch(err => {
                console.error(err)
              })
          })
        })
        .catch(err => {
          this.ended = true
        })
    },
    /* 滚动条设置 */
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight + 10 >= scrollHeight) {
        // 后台加载数据
        this.throttledGetOrders()
      }
    }
  },
  mounted: function() {
    this.getNextOrders()
    window.addEventListener("scroll", this.handleScroll, true)
  }
}
</script>
